<template>
  <div class="unittend_cont">
    <div class="unittend_top">
      <el-form class="table_serch">
        <div class="table_serch_labe" style="margin-left: 15px">
          <div class="table_serch_labe_title">线体</div>
          <Linedrpdown
            :linedroplist="linedroplist"
            :formInline="formInline"
          ></Linedrpdown>
        </div>

        <div class="table_serch_labe" style="margin-left: 0px">
          <div class="table_serch_labe_title">设备</div>
          <el-form-item label="">
            <el-select
              v-model="formInline.site"
              clearable
              size="mini"
              style="margin-left: 5px; margin-top: 0px; width: 140px"
              placeholder="请选择内容"
            >
              <el-option label="AFI" value="AFI"></el-option>
              <el-option label="ABI" value="ABI"></el-option>
            </el-select>
          </el-form-item>
        </div>

        <div class="table_serch_labe" style="margin-left: 0px">
          <div class="table_serch_labe_title">机种</div>
          <Ariplandown
            :modlulist="modlulist"
            :formInline="formInline"
          ></Ariplandown>
        </div>

        <div class="table_serch_labe" style="margin-left: 0px">
          <div class="table_serch_labe_title">选择日期</div>
          <el-form-item label="">
            <EndTime :formInline="formInline"></EndTime>
            <!-- <el-date-picker
                          size="mini"
                          v-model="formInline.endtime"
                          value-format="yyyy-MM-dd"
                          type="date"
                          placeholder="选择日期"
                          style="width: 135px; margin-left: 5px"
                        >
                        </el-date-picker> -->
          </el-form-item>
        </div>

        <div class="table_serch_labe">
          <el-button
            type="primary"
            size="mini"
            style="height: 30px; margin-top: 5px"
            @click="unitterndlick"
            >查询</el-button
          >
        </div>
      </el-form>
    </div>

    <div class="unittend_hader">
      <div id="unittend_eachret"></div>
    </div>
  </div>
</template>

<script>
import EndTime from "../../../components/endTime/Endtime";
import Linedrpdown from "../../../components/Linedropdown/Linedropdown";
import Ariplandown from "../../../components/Airplandown/Airplandown";

export default {
  components: { Linedrpdown, Ariplandown, EndTime },
  data() {
    return {
      linedroplist: [],
      modlulist: [],

      formInline: {
        recipe: "",
        site: "",
        line: "",
        endtime: "",
      },
    };
  },
  mounted() {
    this.getModelnolist();

        // this.unitendEcharts();
  },
  methods: {
    getModelnolist() {
      this.ajax(`func/1023/selProductList`).then((res) => {
        if (res.status == 200) {
          console.log(res.data);
          this.linedroplist = res.data.line;
          this.modlulist = res.data.product;
          this.Defectlist = res.data.product;
        }
      });
    },

    ///数据请求方法
    unitterndlick() {
      if (this.formInline.line == "") {
        this.$message({
          showClose: true,
          message: "线体不能为空",
          type: "warning",
        });
      } else if (this.formInline.site == "") {
        this.$message({
          showClose: true,
          message: "设备不能为空",
          type: "warning",
        });
      } else if (this.formInline.endtime == "") {
        this.$message({
          showClose: true,
          message: "日期不能为空",
          type: "warning",
        });
      } else {
        this.ajax
          .get(
            `prod/1030?line=${this.formInline.line}&site=${this.formInline.site}&endtime=${this.formInline.endtime}&recipe=${this.formInline.recipe}`
          )
          .then((res) => {
            if (res.status == 200) {
              console.log("11111111111", res.data.res);
              this.items = res.data.res;
              this.unitendEcharts();
            }
          });
      }
    },

    ///柱状图
    unitendEcharts() {
      let MyEcharts = this.$echarts.init(
        document.getElementById("unittend_eachret")
      );
      var keylist = [];
      var mislist = [];
      var dotlist = [];
      var muralist = [];
      var overlist = [];
      var num = 0;
      var numlist = [];
      for (let i = 0; i < this.items.length; i++) {
        keylist.push(this.items[i].key);
        mislist.push(this.items[i].mis);
        overlist.push(this.items[i].over);
        dotlist.push(this.items[i].dot);
        muralist.push(this.items[i].mura);
      }

      for (let i = 0; i < this.items.length; i++) {
        var count = this.items[i];
        num = count.dot + count.mis + count.mura;
        numlist.push(num.toFixed(2));
      }
      console.log("11111111111111111", numlist);

      //  for(let i=0;i<numlist.length;i++){
      //    var tony = numlist[i]
      //     numlist.push(tony.toFixed(2))
      // }
      //   var ony = numlist.map(Number);
      var option = {
        title: [
          {
            text: "设备过漏检趋势统计",
            x: "center",
            y: "5%",
            top: "2%",
            textStyle: {
              fontSize: 13,
              fontWeight: 100,
            },
          },
          {
            subtext: "纵轴单位(百分比)",
            subtextStyle: {
              align: "left",
              lineHeight: 66,
              fontSize: 10,
              padding: 15,
            },
          },
        ],
        color: ["#3398DB"],
        tooltip: {
          trigger: "item",
          formatter: function (data) {
            return data.seriesName + ":" + data.value + "%";
          },
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: [
            "设备过检率",
            "设备漏检率",
            "Y1漏检率",
            "Y2漏检率",
            "设备过检线",
            "设备漏检线",
          ],
          // left: "85%",
          top: "6%",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "1%",
          containLabel: true,
        },
        xAxis: [
          {
            name: "时间",
            nameTextStyle: {
              padding: [0, 0, 0, 20],
            },
            type: "category",
            data: keylist,
            axisLabel: {
              interval: 0,
              rotate: 60,
            },
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              formatter: "{value}%",
            },
          },
          {
            type: "value",
            axisLabel: {
              formatter: "{value}%",
            },
          },
        ],
        series: [
          {
            name: "设备过检率",
            type: "bar",
            barWidth: "5%",
            data: overlist,
          },
          {
            name: "设备漏检率",
            type: "bar",
            barWidth: "5%",
            stack: "ony",
            data: mislist,
            itemStyle: {
              color: "#a90000",
            },
          },
          {
            name: "Y1漏检率",
            type: "bar",
            stack: "ony",
            barWidth: "5%",
            data: dotlist,
            itemStyle: {
              color: "#FF9966",
            },
          },
          {
            name: "Y2漏检率",
            type: "bar",
            stack: "ony",
            barWidth: "5%",
            data: muralist,
            itemStyle: {
              color: "#9933CC",
            },
          },
          {
            name: "设备过检线",
            type: "line",
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  normal: {
                    position: "insideRight",
                    //  formatter: "{a} <br/>{b}:({c}%)",
                    formatter: function (params) {
                      //标签内容
                      return params.value + "%";
                    },
                  },
                },
              },
            },
            lineStyle: {
              normal: {
                type: "dashed",
                color: "#000",
              },
            },
            smooth: false,
            markPoint: {
              symbolOffset: ["70%", "90%"],
            },
            data: overlist,
            yAxisIndex: 1,
          },
          {
            name: "设备漏检线",
            type: "line",
                label: {
                  normal: {
                    show: true,
                    color: "red",
                    position: "insideRight",
                    //  formatter: "{a} <br/>{b}:({c}%)",
                    formatter: function (params) {
                      //标签内容
                      return params.value + "%";
                    },
                  },
                },
         
         
            lineStyle: {
              normal: {
                type: "dashed",
                color: "red",
              },
            },
            smooth: false,
            markPoint: {
              symbolOffset: ["70%", "90%"],
            },
            data: numlist,
            yAxisIndex: 1,
          },
        ],
      };
      window.onresize = function () {
        MyEcharts.resize();
      };
      MyEcharts.setOption(option);
    },
  },
};
</script>

<style  scoped>
.unittend_cont {
  width: 100%;
  /* border: 1px solid #000; */
}
.unittend_top {
  width: 100%;
  background-color: #ffffff;
  box-shadow: 0px 0px 0px 1.5px #c9c8c8;
  border-radius: 5px 5px 5px 5px;
}
.table_serch {
  width: 100%;
  min-width: 1000px;
  padding-top: 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.table_serch_labe {
  height: 35px;
  display: flex;
  margin-left: 10px;
  margin-bottom: 10px;
}
.table_serch_labe_title {
  font-size: 11px;
  line-height: 40px;
}
.unittend_hader {
  width: 100%;
  margin-top: 40px;
}
#unittend_eachret {
  width: 100%;
  height: 70vh;
  /* border:1px solid #000; */
  background-color: #ffffff;
  box-shadow: 0px 0px 0px 1.5px #c9c8c8;
  border-radius: 5px 5px 5px 5px;
}
</style>